<template>
  <ph-view>
    <ph-blockquote type="warning">
      note： PhForm+&lt;Datetime|Date|Year|Month|Time&gt; (凡是PhForm为前缀的)
      表单组件需要以PhForm为父组件工作，如需单独使用，如下：
      <br />
      import {Ph+&lt;Datetime|Date|Year|Month|Time&gt;} from "@/index"
      用法同上但是没有验证功能, @change 替换 
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="ph-form-xxx案例">
        <ph-preview url="/datetime-free"/>
        <div style="padding:10px;"/>
        <FormDatetimeDemo/>
        <ph-pretty>{{ demo2 }}</ph-pretty>
      </ph-tab-panel>
      
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
        <ph-blockquote type="warning">
          note：该组件内部使用<router-link to="/datetimeBtn"
            >PhDatetimeButton</router-link
          >组件，所以需要引入相关依赖，参考<router-link to="/datetimeBtn"
            >PhDatetimeButton用法</router-link
          >
        </ph-blockquote>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhView,
  PhTab,
  PhTabPanel,
  // PhDivider,
  PhBlockquote,
  // PhDatetimeCascade,
  // PhDatetime,
} from "@/index";
import FormDatetimeDemo from './free/form-datetime.vue'
import * as Data from "../data/datetime-input";
export default defineComponent({
  components: {
    PhView,
    PhTab,
    PhTabPanel,
    PhBlockquote,
    FormDatetimeDemo,
    // PhDivider,
    // PhDatetimeCascade,
    // PhDatetime,
  },
  setup() {
    return {
      ...Data,
    };
  },
});
</script>
